<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul , ol {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .wrapper {
            width: 600px;
            border: 1px solid #ccc;
        }
        .clearfix::after {
            content: "";
            display: block;
            clear: both;
        }
        .wrapper .left ,
        .wrapper .right {
            width: 100px;
            height: 360px;
            float: left;
        }
        .wrapper .center {
            width: 400px;
            height: 360px;
            overflow: hidden;
            float: left;
        }
        .wrapper .center ul li {
            display: none;
        }
        .wrapper .center ul li.current {
            display: block;
        }
        .wrapper .center ul li img {
            display: block;
            width: 400px;
            height: 360px;
        }
        .wrapper .left li ,
        .wrapper .right li  {
            width: 98px;
            height: 38px;
            border: 1px solid #ccc;
            text-align: center;
            
        }
        .wrapper .left li.active  ,
        .wrapper .right li.active {
            border: 1px solid #f00;
            background-color: #f00;
        }
        .wrapper .left li img ,
        .wrapper .right li > img {
            vertical-align: middle;
            width: 60px;
            height: 38px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="section clearfix">
            <div class="left">
                <ul>
                    <li class="active"><img src="./images/呢大衣.jpg" alt=""></li>
                    <li><img src="./images/围巾.jpg" alt=""></li>
                    <li><img src="./images/女包.jpg" alt=""></li>
                    <li><img src="./images/女裤.jpg" alt=""></li>
                    <li><img src="./images/女靴.jpg" alt=""></li>
                    <li><img src="./images/棉服.jpg" alt=""></li>
                    <li><img src="./images/毛衣.jpg" alt=""></li>
                    <li><img src="./images/牛仔裤.jpg" alt=""></li>
                    <li><img src="./images/男包.jpg" alt=""></li>
                </ul>
            </div>
            <div class="center">
                <ul>
                    <li class="current"><img src="./images/呢大衣.jpg" alt=""></li>
                    <li><img src="./images/围巾.jpg" alt=""></li>
                    <li><img src="./images/女包.jpg" alt=""></li>
                    <li><img src="./images/女裤.jpg" alt=""></li>
                    <li><img src="./images/女靴.jpg" alt=""></li>
                    <li><img src="./images/棉服.jpg" alt=""></li>
                    <li><img src="./images/毛衣.jpg" alt=""></li>
                    <li><img src="./images/牛仔裤.jpg" alt=""></li>
                    <li><img src="./images/男包.jpg" alt=""></li>
                    <li><img src="./images/男棉服.jpg" alt=""></li>
                    <li><img src="./images/男毛衣.jpg" alt=""></li>
                    <li><img src="./images/男靴.jpg" alt=""></li>
                    <li><img src="./images/登山鞋.jpg" alt=""></li>
                    <li><img src="./images/皮带.jpg" alt=""></li>
                    <li><img src="./images/皮衣.jpg" alt=""></li>
                    <li><img src="./images/羽绒服.jpg" alt=""></li>
                    <li><img src="./images/连衣裙.jpg" alt=""></li>
                    <li><img src="./images/雪地靴.jpg" alt=""></li>
                </ul>
            </div>
            <div class="right">
                <ul>
                    <li><img src="./images/男棉服.jpg" alt=""></li>
                    <li><img src="./images/男毛衣.jpg" alt=""></li>
                    <li><img src="./images/男靴.jpg" alt=""></li>
                    <li><img src="./images/登山鞋.jpg" alt=""></li>
                    <li><img src="./images/皮带.jpg" alt=""></li>
                    <li><img src="./images/皮衣.jpg" alt=""></li>
                    <li><img src="./images/羽绒服.jpg" alt=""></li>
                    <li><img src="./images/连衣裙.jpg" alt=""></li>
                    <li><img src="./images/雪地靴.jpg" alt=""></li>
                </ul>
            </div>   
        </div>
    </div>

    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
    <script>
        // 基本步骤：
        // 技巧：
            // 调用者：
            // 参数：
            // 返回值：
            // 功能：
        // 入口函数
        $(function(){
            // 选择元素
            $(".left li").mouseenter(function(){
                // console.log("111");
                // 获取索引值的方法
                var index = $(this).index();
                console.log(index);
                // 选择中间的列表
                $(".center li")
                .eq(index)
                .addClass("current")
                .siblings()
                .removeClass("current");
                // 切换tab选项高亮
                $(this).addClass("active")
                .siblings()
                .removeClass("active")
                // 右侧菜单移除tab高亮
                $(".right li").removeClass("active")
            })

            // 最朴素的编码方式 cv
             // 选择元素
             $(".right li").mouseenter(function(){
                // console.log("111");
                // 获取索引值的方法
                var index = $(this).index() + 9;
                console.log(index);
                // 选择中间的列表
                $(".center li")
                .eq(index)
                .addClass("current")
                .siblings()
                .removeClass("current");
                // 切换tab选项高亮
                $(this).addClass("active")
                .siblings()
                .removeClass("active")
                // 右侧菜单移除tab高亮
                $(".left li").removeClass("active")
            })

        })


    </script>


</body>
</html>
<!-- 
    1. 改变元素display属性，实现图片的显示和隐藏
    2. 改变img标签的src属性，用数组记录图片路径
 -->